<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码框效果</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

<body>

    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>

    <script>
        $(function(){
            $("input").blur(function(){
                if($("input").val().length<6||$("input").val().length>16){
                    $("p").html("您输入的位数不对，要求6~16位");
                    $("p").css("color","red");

                }else{
                    $("p").html("输入正确");
                    $("p").css("color","green");
                }
            })
        })
    </script>
</body>

</html>